<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>10_防抖-源码</title>
        <style>
            div {
                width: 300px;
                height: 300px;
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
        <div>1</div>


        <script>

            // （1）可以执行 但是有一个问题 如果想让其他的函数也防抖 那么就不是那么的
            // 方便  
            // var div = document.querySelector('div');

            // function move(){
            //     div.innerHTML++;
            // }

            // function debounce(){
            //     move();
            // }

            // div.addEventListener('mousemove',debounce)


            // (2) 如果想解决1的问题  那么给debounce传递一个函数的参数 会更加的好
            // 此时会出现一个问题  因为debounce直接就调用了  所以开始的时候就变成了2

            // 而我们想移动的时候 再去执行  此时做不到
            // var div = document.querySelector('div');
            // function move(){
            //     div.innerHTML++;
            // }

            // function debounce(func){
            //     func();
            // }

            // div.addEventListener('mousemove',debounce(move))


            // (3)
            // addEventListener的第二个参数什么时候执行？？？
            // 事件触发的时候执行
            // var div = document.querySelector('div');
            // function move(){
            //     div.innerHTML++;
            // }

            // function debounce(func){
            //     return function(){
            //         func();
            //     }
            // }

            // div.addEventListener('mousemove',debounce(move))


            // (4) 只要是移动了1像素 那么就会执行一次定时器
            var div = document.querySelector('div');
            function move(){
                div.innerHTML++;
            }

            function debounce(func){
                var timer = null;
                return function(){
                    clearTimeout(timer);
                    timer = setTimeout(function(){
                        func();
                    },2000);
                }
            }

            div.addEventListener('mousemove',debounce(move))
        </script>
    </body>
</html>